<template>
  <div class="contents-container">
    <div class="search-area">
      <el-button size="mini" class="ml-15" type="success" @click="resetTemp">新增流程</el-button>
    </div>
    <!-- 列表 -->
    <el-table v-loading="listLoading" :data="listData" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="流程名称" align="center" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.flowName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="流程内容" align="center">
        <template slot-scope="scope">
          <span v-for="(item,index) in scope.row.phaselist" :key="index">{{ item.phaseName }},</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" width="300">
        <template slot-scope="scope">
          <span>{{ scope.row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDeleted(scope.row.flowId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/修改 -->
    <PopWindow v-show="showForm" :title="title" :mode="modeValue" @close="closeForm" @addHandle="addHandle" @updateHandle="updateHandle">
      <el-form ref="addForm" :model="formData" label-width="100px" size="small" :rules="formDataRules">
        <el-form-item label="流程名称" prop="flowName">
          <el-input v-model="formData.flowName" class="my-input" />
        </el-form-item>
        <el-form-item label="流程备注" prop="remark">
          <el-input v-model="formData.remark" class="my-input" />
        </el-form-item>
        <el-form-item
          v-for="(item, index) in formData.phaselist"
          :key="index"
          :label="'阶段' + (index + 1)"
          :prop="'phaselist.' + index + '.phaseName'"
          :rules="{
            required: true, message: '请选择阶段', trigger: 'blur'
          }"
        >
          <el-select v-model="item.phaseName">
            <el-option v-for="i in stageList" :key="i.id" :label="i.name" :value="i.id" />
          </el-select>
          <i class="el-icon-remove" v-if="index != 0" style="margin-left:10px;color:red;font-size:16px;cursor:pointer;" @click="remove(index)"></i>
        </el-form-item>

        <el-button @click="addDomain">增加阶段</el-button>
      </el-form>

    </PopWindow>
    <pagination
      v-show="total > 0"
      :total="total"
      :page-index.sync="listQuery.page"
      :page-size.sync="listQuery.limit"
      @pagination="getListData"
    />
  </div>
</template>

<script>
	import {
		addFlow,
		editFlow,
		deleteFlow,
		getFlowList
	} from '@/api/proFlow'
	import {
		getStageSelect
	} from '@/api/common'
	import Pagination from '@/components/Pagination'
	import PopWindow from '@/components/PopWindow'
	export default {
		name: 'Flow',
		components: {
			Pagination,
			PopWindow
		},
		data() {
			return {
				listLoading: false,
				total: 1, // 总数
				listData: [],
				listQuery: {
					page: 1, // 当前页码
					limit: 10 // 每页数量
				},
				stageList: [],
				showForm: false, // 新增修改弹窗显示否
				dialogStatus: '', // 弹窗状态
				title: '新增流程',
				modeValue: 'add',
				formData: {
					flowName: '',
					remark: '',
					phaselist: [{
						phaseName: '',
						phaseRank: ''
					}]
				},
				// 表单验证规则
				formDataRules: {
					flowName: [{
							required: true,
							message: '请输入流程名称',
							trigger: 'blur'
						},
						{
							max: 100,
							message: '流程名称100个字内',
							trigger: 'blur'
						}
					],
					remark: {
						max: 200,
						message: '备注200个字内',
						trigger: 'blur'
					}
				}
			}
		},
		watch: {
			'formData.phaselist': {
				handler() {
					const that = this
					that.formData.phaselist.forEach(item => {
						that.stageList.forEach(i => {
							if (i.phaseName == item.phaseName) {
								that.$set(item, 'phaseRank', i.phaseRank)
							}
						})
					})
				},
				deep: true
			}

		},
		mounted() {
			this.getListData()
			this.getSelect()
		},
		methods: {
			getListData(page) {
				// 列表初始数据
				const that = this
				that.$loadings()
				that.listQuery.page = page || 1
				getFlowList(that.listQuery).then((res) => {
					that.$loadings().close()
					that.listData = res.data
					that.page = page
					that.total = res.count
				}).catch(() => {
					that.$loadings().close()
				})
			},
			getSelect() {
				// 下拉框数据
				getStageSelect({}).then((res) => {
					this.stageList = res.data
				}).catch(() => {})
			},
			addDomain() {
				this.formData.phaselist.push({
					phaseName: '',
					phaseRank: ''
				})
			},
      remove(index){
        this.formData.phaselist.splice(index,1)
      },
			resetTemp() {
				this.title = '新增流程'
				this.modeValue = 'add'
				this.formData = {
					flowName: '',
					remark: '',
					phaselist: [{
						phaseName: '',
						phaseRank: ''
					}]
				}
				this.showForm = true
			},
			updateHandle() {
				var that = this
				that.$refs.addForm.validate(valid => {
					if (valid) {
						that.$loadings()
						editFlow(that.formData)
							.then(data => {
								that.$loadings().close()
								that.$message({
									type: 'success',
									message: '修改成功!'
								})
								that.getListData()
								that.closeForm() // 重置表单
							})
							.catch(() => {
								that.$loadings().close()
							})
					} else {
						return false
					}
				})
				this.showForm = false
			},
			addHandle() {
				var that = this
				that.$refs.addForm.validate(valid => {
					if (valid) {
						that.$loadings()
						addFlow(that.formData)
							.then(data => {
								that.$loadings().close()
								that.$message({
									type: 'success',
									message: '添加成功!'
								})
								that.getListData()
								that.closeForm() // 重置表单
							})
							.catch(() => {
								that.$loadings().close()
							})
					} else {
						return false
					}
				})
				this.showForm = false
			},
			closeForm() {
				if (this.$refs.formData) {
					this.$refs.formData.resetFields()
				}
				this.showForm = false
			},
			handleEdit(val) {
				this.formData.flowName = val.flowName
				this.formData.remark = val.remark
				this.formData.phaselist = val.phaselist
				this.formData.flowId = val.flowId
				this.title = '修改流程'
				this.modeValue = 'edit'
				this.showForm = true
			},
			handleDeleted(id) {
				// 修改流程
				const that = this
				that.$confirm('是否删除该条数据?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.$loadings().close()
					deleteFlow({
						flowId: id
					}).then((res) => {
						that.$loadings().close()
						that.$message({
							type: 'success',
							message: '操作成功!'
						})
						that.getListData()
					}).catch(() => {
						that.$loadings().close()
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
